<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>demo3</title>
	<style type="text/css">
		*{
			margin:0px;
			padding: 0px;
			text-decoration: none;
		}
		.box{
			width: 200px;
			height: 200px;
			background-color: pink;
			/*position: absolute;
			left: 50%;
			top:50%;*/
		}
		.box .xbox{
			width: 50px;
			height: 50px;
			background-color: blue;


		}
	</style>
	<script type="text/javascript">
		window.onload=function (){
			box=document.getElementsByClassName("box");

			//alert(box[0]);
			// box[0].onclick=function(){
			// 	alert("盒子事件");
			// }
			xbox=document.getElementsByClassName("xbox");
			//alert(xbox[0]);
			x=0;
			box[0].onclick=function(){
				
				if(x==0){
					content=xbox[0].innerHTML;
					box[0].innerHTML=content;
					xbox[0].style.display="none";
					x=1;

				}else{
					
					

					
					
					
					xbox[0].style.display="block;
					x=0;
					
				}
				
				
				//alert(content);
			}
		}
		
	</script>
</head>
<body>
	<div class="box">
		<div class="xbox">
			法的萨芬的说法
		</div>
	</div>
</body>
</html>